<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width,initial-scale=1.0" />
		<title>Document</title>
	</head>
	<body>
		<p>会员余额:<span id="span1">0</span>元</p>
		<input type="text" id="input1" placeholder="请输入充值金额" />
		<button id="btn1">充值</button>
		<script>
			// js的组成部分：ECMAScript(js的核心)+DOM(文档对象模型)+BOM(浏览器对象模型)
			var myName = 'Jack';
			let age = 18;
			let isBoy = true;
			let citys = ['西安','杨凌','汉中','富平','延安'];
			let person = {
				name: 'MaBaoGuo',
				age: 69,
				hasWuDe: true,
				kongFu:[
					'耗子尾汁',
					'偷袭',
					'大意了没有闪',
					'有备而来',
					'接化发'
				]
			}
			function showValue() {
			console.log(myName);
			console.log(age);
			console.log(isBoy);
			console.log(citys);
			console.log(person);
			}
			showValue()
			//============
			//选择元素
			let btn = document.getElementById('btn1');
			let input = document.querySelector('#input1');
			let span =document.querySelector('#span1');
			//点击按钮，充值，监听事件
			btn.onclick=function(){
				console.log(input.value);
				console.log(span.innerHTML);
				console.log(Number(span.innerHTML)+input.value*1);
				let finalNum = Number(span.innerHTML)+input.value*1;
				span.innerHTML = finalNum;
			}
			
		</script>
	</body>
</html>
